<template>
	<view>
		<view>
			<view class="pici-main" v-for="(item, index) in piciList" :key="index" :data-index='index'>
				<!--批号明细-->
				<view class="pici-contain">
					<view class="pici-box">
						<view class="title">批次：</view>
						<input class="inpt" name="input" disabled="true" :value="item.no"></input>
					</view>
					<view class="pici-box">
						<view class="title">出厂日期：</view>
						<input class="inpt" name="input" disabled="true" :value="item.name"></input>
						<view class="remember" @tap="choosepici">
							<image class="remember-image" src="../../../static/xuan.png" mode="aspectFill" v-if="!agree"></image>
							<image class="remember-image" src="../../../static/xuan2.png" mode="aspectFill" v-else></image>
						</view>

					</view>
					<view class="pici-box">
						<view class="title">保质期截止日期：</view>
						<input class="inpt" name="input" disabled="true" :value="item.name"></input>
					</view>
					<view class="pici-box">
						<view class="title">有效天数：</view>
						<input class="inpt" name="input" disabled="true" :value="item.name"></input>
						<view class="title">实际有效数量：</view>
						<input class="inpt" name="input" disabled="true" :value="item.name"></input>
					</view>
					<view class="pici-box" style="display: flex;">
						<view class="title">货位名称：</view>
						<!-- <input class="" name="input" disabled="true" :value="item.name1" style="width: 100%;
		 word-break: break-all; 
		 word-wrap: break-word; 
		white-space: pre-wrap; "></input> -->
						<view class="inpt">
							{{item.name1}}
						</view>
					</view>


				</view>
			</view>
		</view>


		<view class="footer margin-top">
			<text class="footer-text">
				下面已经没有了
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				piciList: [{
						no: "15555",
						name: "111",
						name1: "各国会大厦"
					},
					{
						no: "15555",
						name: "111",
						name1: "各国会大厦"
					},
					{
						no: "15555",
						name: "111",
						name1: "各国会大厦"
					}
				],
				agree: true
			}
		},
		methods: {
			choosepici(e) {
				console.log(e)
				this.agree = !this.agree;
			}
		}
	}
</script>

<style>
	page {
		background: #E4E7ED;
	}

	.pici-main {
		background: #FFFFFF;
		margin: 10px 25rpx 0 25rpx;
	}

	.pici-box {
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		/* min-height: 100upx; */
		justify-content: space-between;
	}

	.pici-box .title {
		text-align: justify;
		padding-right: 10upx;
		font-size: 30upx;
		position: relative;
		min-height: 50upx;
		line-height: 54upx;
	}

	.pici-box .inpt {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 10upx;
	}

	.footer {
		text-align: center;
	}

	.remember-image {
		opacity: 1;
		width: 50upx;
		height: 50upx;
	}
</style>
